/**
 * sizeGird  网格大小
 * num 网格
 * count 计算有多少可行方法
 * posArr 存储每次成功的位置
 * posArrAll 存储整体完成后的位置
 */
let sizeGird = 50;
let num = 8;
let count = 0;
let posArr = [];
let posArrAll = [];

/**
 *
 *
 * @class Init
 */
class Init {
    constructor(){
        this.div = null;
        this.lis = null;
        this.len = null;
    }
    start(){
        this.div = document.querySelector('#list');
        this.lis = document.getElementsByTagName('li');
        this.div.style.width = num * (sizeGird + 1) + 'px';
        // 创建格子
        this.len = num * num;
        for(let i = 0; i < this.len; i++){
            let e = new createGird(this.div);
            e.draw();
        }

        // 得到x,y轴坐标
        for(let i = 0; i < num; i++){
            for(let j = 0; j < num; j++){
                this.lis[i * num + j].x = j;
                this.lis[i * num + j].y = i;
                // this.lis[i * num + j].innerHTML = j + ',' + i;
            }
        }
    }
    setQueen(iQueen){
        if(iQueen == num){
            // 每次得到的添加到复合数组中
            posArrAll.push(posArr.concat());
            count++;
            return;
        };

        for(let i = 0; i < num; i++){
            if(this.lis[iQueen * num + i].index == -1){
                // 执行找到棋子的位置
                this.lis[iQueen * num + i].index = iQueen;
                posArr.push(this.lis[iQueen * num + i]);
                // this.lis[iQueen * num + i].innerHTML = iQueen;

                // 利用之前挂载好的坐标
                let x = this.lis[iQueen * num + i].x;
                let y = this.lis[iQueen * num + i].y;

                // 0,0  0,1  0,2  0,3  0,4
                // console.log(x,y);

                /* 在所有li中进行循环筛选
                排除 x相同,y相同，x-y相同,x+y相同 */
                for(let j = 0; j < this.lis.length; j++){
                    if(this.lis[j].index == -1 && (this.lis[j].x == x || this.lis[j].y == y || this.lis[j].x - this.lis[j].y == x -y || this.lis[j].x + this.lis[j].y == x + y)){
                        this.lis[j].index = iQueen;
                        // this.lis[j].innerHTML = iQueen;
                    }
                }

                this.setQueen(iQueen + 1);
                // 回溯
                // 回溯删除之前添加的
                posArr.pop();
                for(let k = 0; k < this.lis.length; k++){
                    // 判断比对成功还原到上一层
                    if(this.lis[k].index == iQueen){
                        this.lis[k].index = -1;
                    }
                }
            }
        }
    }
    showImg(){
        this.change();
        setInterval(this.change.bind(this), 2000);
    }
    change(){
        // 还原背景图
        for(let i = 0; i < this.lis.length; i++){
            this.lis[i].style.backgroundImage = '';
            this.lis[i].classNam = '';
        }
        // 随机寻找 posArrAll中的一组
        let randomLi = posArrAll[Math.floor(posArrAll.length * Math.random())];
        // 随机赋值
        for(let i = 0; i < randomLi.length; i++){
            randomLi[i].style.backgroundImage = 'url("img/'+ Math.floor(Math.random() * 13 + 1) +'.jpg")';
            randomLi[i].className = 'active';
            randomLi[i].style.animationDelay = Math.random() * 2 + 's';
            randomLi[i].style.webkitAnimationDelay = Math.random() * 2 + 's';
        }
    }
}

/**
 * 创建网格
 *
 * @class createGird
 */
class createGird {
    constructor(div){
        this.div = div;
        this.li = null;
    }
    draw(){
        this.li = document.createElement('li');
        this.li.style.width = sizeGird + 'px';
        this.li.style.height = sizeGird + 'px'; 
        this.li.style.lineHeight = sizeGird + 'px';
        // 索引值
        this.li.index = -1;
        // this.li.innerHTML = this.li.index;
        this.div.appendChild(this.li);
    }
}

let init = new Init();
init.start();
init.setQueen(0);
init.showImg();

console.log(count);
// console.log(posArrAll);